<html>
  <head>
    <style>

      @keyframes twinkle { 
        from { transform: scale(1); } 
        50% { transform: scale(1.6); } 
        to { transform: scale(1); }
      }

      img.twinkle { width:32dip; vertical-align:middle; }
    
      img.twinkle.animate {
        animation:10 sine-in-out 600ms twinkle alternate; 
      }
    
    </style>
    <script type="text/tiscript">

    function self.ready() { 
      self.timer(20ms, ::$(#heart).attributes.addClass("animate"));
    }
    
    event click $(button#stop) {
      $(#heart).attributes.removeClass("animate");
    }
    
    </script>
  </head>
<body>

  <p>From Sciter with love! <img.twinkle #heart src="../animations/tutorial-parts/heart.png"></p>   

  <button #stop>Stop twinkling</button>

</body>
</html>
